<!--  -->
<template>
<el-header class="header">
    <div class="logocon"><a><img src="../assets/logo.png" alt="logo"></a></div>
    <div class="inputcon">
        <el-input v-model="myvalue" class="searchinput" placeholder="请输入内容"></el-input>
        <el-button type="primary">查询</el-button>  
    </div>
    <ul class="navcon">
         <button type="button" class="el-button el-button--primary"><router-link to="/" tag="span">首页</router-link></button>
    <button type="button" class="el-button el-button--primary"><router-link to="/bag" tag="span">商城页面</router-link></button>
    <button type="button" class="el-button el-button--primary"><router-link to="/myRightMain" tag="span">文章推荐</router-link></button>
    <button type="button" class="el-button el-button--primary"><router-link to="/user/red" tag="span">用户</router-link></button>
    </ul>
</el-header>
</template>

<script>
export default {
  data () {
    return {
        myvalue:""
    };
  }
}
</script>
<style scoped>
    .header{
        background: gold;
        height:60px;
        text-align: center;
        line-height: 60px;
        overflow: hidden;
    }
    .logocon {
        float: left;
        width:60px;
    }
    .logocon img {
        display: block;
        outline: none;
        width: 100%;
        height:100%;
    }
    .inputcon {
        float: left;
        margin-left:20px;
    }
    .searchinput {
       height:36px;
       width:200px;
    }
    
    .navcon {
        float: right;
        padding:0 10px;
        
    }
    
</style>
